<template>
  <!--  缺寝登记-->
  <div style="margin-top: 60px;margin-left:330px;width: 300px;height: 500px;border: 0 solid red;">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="楼栋" prop="buildingId">
        <el-input v-model="ruleForm.buildingName" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="公寓号" prop="dormitoryId">
        <el-input v-model="ruleForm.dormitoryName" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="学生" prop="studentId">
        <el-input v-model="ruleForm.studentName" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="原因" prop="reason">
        <el-input type="textarea" v-model="ruleForm.reason"></el-input>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio-group :disabled="true" v-model="ruleForm.status" size="medium">
          <el-radio-button label="学生请假">学生请假</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="日期" prop="createDate">
        <el-date-picker
            style="width: 200px"
            v-model="ruleForm.createDate"
            type="date"
            placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">登记</el-button>
      </el-form-item>
    </el-form>
  </div>

</template>

<script>
export default {
  data() {
    return {
      i: 0,
      category: null,
      ruleForm: {
        buildingId: '',
        buildingName: '',
        dormitoryId: '',
        dormitoryName: '',
        studentId: '',
        studentName: '',
        reason: '',
        status: '学生请假',
        createDate: '',
      },
      buildingList: '',
      dormitoryList: '',
      studentList: '',
      rules: {
        buildingId: [
          {required: true, message: '请选择楼栋', trigger: 'change'}
        ],
        dormitoryId: [
          {required: true, message: '请选择公寓', trigger: 'change'}
        ],
        studentId: [
          {required: true, message: '请选择学生', trigger: 'change'}
        ],
        reason: [
          {required: true, message: '请输入原因', trigger: 'blur'}
        ],
        status: [
          {required: true, message: '请选择状态', trigger: 'blur'}
        ],
        createDate: [
          {required: true, message: '请输入日期', trigger: 'blur'}
        ]
      }
    };
  },
  methods: {
    fetchCurrentUserInformation() {
      const _this = this;
      // 调用GET请求获取当前用户信息
      axios.get(`http://localhost:9090/absent/findBuildingByStudentId/${this.currentUserId}`)
          .then(function (resp) {
            const data = resp.data.data;

            // 设置组件的数据
            _this.ruleForm.buildingName = data.buildingName;
            _this.ruleForm.dormitoryName = data.dormitoryName;
            _this.ruleForm.studentName = data.studentName;

            // 设置提交时需要的字段
            _this.ruleForm.buildingId = data.buildingId;
            _this.ruleForm.dormitoryId = data.dormitoryId;
            _this.ruleForm.studentId = data.studentId;
          })
          .catch(function (error) {
            console.error('Error fetching user information:', error);
          });
    },

    submitForm(formName) {
      const _this = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let student = _this.$store.state.student;

          // 设置学生相关信息到表单
          _this.ruleForm.studentId = student.id;
          _this.ruleForm.studentName = student.name; // 假设学生信息中有姓名字段

          console.log(_this.ruleForm);

          axios.post('http://localhost:9090/absent/save', _this.ruleForm).then(function (resp) {
            if (resp.data.code === 0) {
              _this.$alert('请假登记成功', '', {
                confirmButtonText: '确定',
                callback: action => {
                  _this.$router.push('/leaveDetails')
                }
              });
            }
          });
        }
      });
    },


  },
  created() {
    const _this = this
    // 获取建筑物列表
    axios.get('http://localhost:9090/absent/buildingList').then(function (resp) {
      _this.buildingList = resp.data.data;
      // 获取并设置当前用户信息
      _this.fetchCurrentUserInformation();
    });

  },
  computed: {
    currentUserId() {
      // 假设在 Vuex 中有一个名为 currentUser 的模块，包含用户信息
      return this.$store.state.student.id;
    }
  }
}
</script>
